<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="format-detection" content="telephone=no">
		<title>main6</title>

		<link rel="stylesheet" href="../plugin/seedsui/seedsui.min.css">
		<link rel="stylesheet" href="../plugin/animate/animate.css">
		<style type="text/css">
			.grid {
				background: #fff;
				margin:12px 0 0 0;
				border-top: 1px solid #ddd;	
				border-bottom: 1px solid #ddd;
				border-radius: 0 !important;
			}
			.grid.app a{
				color:white;
				-webkit-animation-duration: 500ms;
				-webkit-animation-timing-function:linear;
				-webkit-animation-fill-mode: both;
			}
			 .grid .grid1 {
				animation-delay:100ms;
				-webkit-animation-delay:100ms;
			}
			.grid .grid2 {
				animation-delay:200ms;
				-webkit-animation-delay:200ms;
			}
			.grid .grid3 {
				animation-delay:300ms;
				-webkit-animation-delay:300ms;
			}
			.grid .grid4 {
				animation-delay:400ms;
				-webkit-animation-delay:400ms;
			}
			.grid .grid5 {
				animation-delay:500ms;
				-webkit-animation-delay:500ms;
			}
			.grid .grid6 {
				animation-delay:600ms;
				-webkit-animation-delay:600ms;
			}
			.grid .grid7 {
				animation-delay:700ms;
				-webkit-animation-delay:700ms;
			}
			.grid .grid8 {
				animation-delay:800ms;
				-webkit-animation-delay:800ms;
			} 
			.maillist{
				-webkit-animation-duration: 1000ms;
				-webkit-animation-timing-function:linear;
				-webkit-animation-fill-mode: both;
			}
		</style>
	</head>
<body>
	<section id="page_main6" class="active">
		<header>
	        <div class="titlebar">
	            <a class="left" href="javascript:history.go(-1)">
	                <i class="icon icon-arrowleft"></i>
	                <span>返回</span>
	            </a>
	            <h1 class="text-center">首页</h1>
	        </div>
	    </header>
	    <article>
	    	<ul class="grid size54" data-rowspace="12" data-col="4">
				<li>
					<a class="grid1 photo animated flipInX bg-1">
						<i class="icon icon-contact-fill"></i>
					</a>
					<label class="grid-label">通讯录</label>
				</li>
				<li>
					<a class="grid2 photo animated flipInX bg-2">
						<i class="icon icon-write-fill"></i>
					</a>
					<label class="grid-label">审批</label>
				</li>
				<li>
					<a class="grid3 photo animated flipInX bg-3">
						<i class="icon icon-position-fill"></i>
					</a>
					<label class="grid-label">定位</label>
				</li>
				<li>
					<a class="grid4 photo animated flipInX bg-4">
						<i class="icon icon-gear-fill"></i>
					</a>
					<label class="grid-label">设置</label>
				</li>
				<li>
					<a class="grid5 photo animated flipInX bg-5">
						<i class="icon icon-folder-fill"></i>
					</a>
					<label class="grid-label">文档</label>
				</li>
				<li>
					<a class="grid6 photo animated flipInX bg-6">
						<i class="icon icon-chartpie-fill"></i>
					</a>
					<label class="grid-label">数据分析</label>
				</li>
				<li>
					<a class="grid7 photo animated flipInX bg-7">
						<i class="icon icon-chartbar-fill"></i>
					</a>
					<label class="grid-label">其它数据</label>
				</li>
				<li>
					<a class="grid8 photo animated flipInX bg-8">
						<i class="icon icon-chatline-fill"></i>
	                    <span class="tip">3</span>
					</a>
					<label class="grid-label">IM</label>
				</li>
			</ul>
			<ul class="list" style="margin-top: 15px;">
	            <li class="noclick" style="border-width: 1px 0;">
	                <div class="justify">
	                    <span class="peg"></span>
	                </div>
	                <div class="justify-content">最新邮件</div>
	                <small class="justify">
	                        <label>更多</label>
	                        <i class="icon icon-arrowbittoright"></i>
	                </small>
	            </li>
	            <li>
	                <div class="justify box box-middle">
	                    <div class="photo bg-1">少波</div>
	                </div>
	                <div class="justify-content">
	                    <small>
	                        <i class="icon icon-rdo-fill color-warn size12"></i>
	                        <label class="bold">张少波</label>
	                        <label class="float-right">12月21日</label>
	                        <i class="icon icon-fav-fill float-right color-warn"></i>
	                    </small>
	                    <p>您的圣诞礼物已经备好，看看咋样</p>
	                    <small class="nowrap">[图片]Hi,柱子:圣诞节到了，给您的圣诞礼物已经备好，来看看喜不喜欢</small>
	                </div>
	            </li>
	            <li>
	                <div class="justify box box-middle">
	                    <div class="photo bg-2">少波</div>
	                </div>
	                <div class="justify-content">
	                    <small>
	                        <i class="icon icon-rdo-fill color-warn size12"></i>
	                        <label class="bold">张少波</label>
	                        <label class="float-right">12月21日</label>
	                        <i class="icon icon-fav-fill float-right color-warn"></i>
	                    </small>
	                    <p>您的圣诞礼物已经备好，看看咋样</p>
	                    <small class="nowrap">[图片]Hi,柱子:圣诞节到了，给您的圣诞礼物已经备好，来看看喜不喜欢</small>
	                </div>
	            </li>
	        </ul>
	    </article>
    </section>
    <script src="../plugin/jquery/jquery.min.js"></script>
	<script src="../plugin/seedsui/seedsui.min.js"></script>
	<script>
		var gridOpt=document.querySelectorAll(".grid>li>a");
		[].slice.call(gridOpt).forEach(function(n,i,a){
			EventUtil.addHandler(n,"animationend",function(){
				n.classList.remove("flipInX","flipInY");
				n.style.webkitAnimationDelay="0s";
			});
			EventUtil.addHandler(n,"click",function(){
				n.classList.add("flipInY");
			});
		});
		//定义exmobi返回
		function back(){history.go(-1);}
	</script>
</body>
</html>